<template>
  <div class="HeritageAdd">
    <div class="HeritageAdd-top">
      <MainTop
        >{{ lang === "zh_cn" ? "查询系统" : "Data maintenance" }}
        <span class="gang"> / </span>
        {{ lang === "zh_cn" ? "数据管理" : "Heritage Management"
        }}<span class="gang"> / </span>
        {{ lang === "zh_cn" ? "故居添加" : "Heritage Add" }}</MainTop
      >
    </div>

    <div class="HeritageAdd-bottom padding15">
      <el-alert
        :title="
          lang === 'zh_cn'
            ? '填写相关信息来添加一项数据'
            : 'Fill in information about industrial heritage, museums or industrial tourist areas to add a heritage data'
        "
        type="info"
      >
      </el-alert>
      <br v-show="newCoordinate.length === 0" />
      <el-alert
        :title="
          lang === 'zh_cn'
            ? '请先拾取要居的地理坐标'
            : 'Please pick the geographical coordinates of the industrial heritage to be added first'
        "
        type="info"
        v-show="newCoordinate.length === 0"
      >
      </el-alert>

      <br />
      <el-button
        type="primary"
        @click="getCoordinateP"
        v-show="newCoordinate.length === 0"
        >拾取故居坐标位置</el-button
      >

      <div class="main-box" v-show="newCoordinate.length !== 0">
        <el-form
          size="mini"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="故居名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="坐标经度" prop="jing">
            <el-input style="width: 200px" v-model="ruleForm.jing"></el-input>
          </el-form-item>
          <el-form-item label="坐标纬度" prop="wei">
            <el-input style="width: 200px" v-model="ruleForm.wei"></el-input>
            <el-button @click="getCoordinateP" style="margin-left: 10px"
              >重新拾取</el-button
            >
          </el-form-item>
          <el-form-item label="票价" prop="company">
            <el-input v-model="ruleForm.company"></el-input>
          </el-form-item>
          <el-form-item label="开放日期" prop="start">
            <el-input v-model="ruleForm.start"></el-input>
          </el-form-item>

          <el-form-item label="开放时间" prop="prolevel">
            <el-input v-model="ruleForm.prolevel"></el-input>
          </el-form-item>

          <el-form-item label="故居简介" prop="brief">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入故居简介"
              v-model="ruleForm.brief"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <el-divider></el-divider>

        <div class="subBtn">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">清空提示</el-button>
        </div>
      </div>
    </div>

    <div class="HeritageAdd-images"></div>
  </div>
</template>

<script>
import MainTop from "../../components/MainTop.vue";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
    MainTop,
  },
  name: "HeritageAdd",

  computed: {
    ...mapState(["lang"]),
    ...mapState(["newCoordinate", "instryType"]),
  },
  async created() {
    // 将坐标拾取状态改为add
    this.changeCoordinateType("add");
    console.log(this.$route);
    if (this.$route.params.editid !== "add") {
      var res = "";

      if (this.instryType === "one") {
        res = await this.$axios.post(
          "/getOneHeritageMainData/getOneHeritageMainData",
          {
            _id: this.$route.params.editid,
          }
        );
      }

      console.log(res.data.data);

      this.ruleForm = res.data.data[0];
      this.ruleForm.coordinate = this.ruleForm.coon.split(",");
      this.ruleForm.jing = this.ruleForm.coordinate[0];
      this.ruleForm.wei = this.ruleForm.coordinate[1];
      console.log("编辑数据", this.ruleForm);
      this.getCoordinate(this.ruleForm.coordinate);
    } else {
      this.ruleForm.jing = this.newCoordinate[0];
      this.ruleForm.wei = this.newCoordinate[1];
    }
  },
  data() {
    return {
      ruleForm: {
        addType: "工业遗产", //添加类型
        name: "", //遗产名称

        company: "", //票价
        jing: 0,
        wei: 0,
        start: "", 
        prolevel: "", //开放时间

        brief: "", //简介
        coon: "",
        coordinate: [],
      },
      // imgobj: {},
      rules: {
        addType: [
          { required: true, message: "请选择添加类型", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, message: "长度在不少于3个字符", trigger: "blur" },
        ],
        company: [
          {
            required: true,
            message: "请输入票价",
            trigger: "change",
          },
        ],
        prolevel: [
          {
            required: true,
            message: "请输入开放时间",
            trigger: "change",
          },
        ],
        start: [
          {
            required: true,
            message: "请输入开放日期",
            trigger: "change",
          },
        ],
        brief: [
          {
            required: true,
            message: "请输入简介",
            trigger: "change",
          },
        ],
        jing: [
          {
            required: true,
            message: "请输入坐标",
            trigger: "change",
          },
        ],
        wei: [
          {
            required: true,
            message: "请输入坐标",
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    ...mapMutations([
      "getCoordinate",
      "changeCoordinateType",
      "getapplyCoordinate",
    ]),

    //跳转页面拾取坐标位置
    getCoordinateP() {
      this.getapplyCoordinate([]);
      this.$router.push("/get/coordinate");
    },

    submitForm(formName) {
      console.log(formName);
      console.log(this.ruleForm);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert("submit!");


          this.ruleForm.coordinate = [this.ruleForm.jing, this.ruleForm.wei];
          this.ruleForm.coon = this.ruleForm.jing + `,` + this.ruleForm.wei;
          // 格式已经处理完毕，下面发送请求

          // 发送请求;
          if (this.$route.params.editid !== "add") {
            // 编辑部分
            if (this.ruleForm.addType === "工业遗产") {
              var res = await this.$axios.post(
                "/editHeritageMainData/editHeritageMainData",
                {
                  _id: this.ruleForm._id,
                  addType: this.ruleForm.addType,
                  name: this.ruleForm.name,
                  company: this.ruleForm.company,
                  start: this.ruleForm.start,
                  prolevel: this.ruleForm.prolevel,
                  coon: this.ruleForm.coon,
                  brief: this.ruleForm.brief,
                }
              );
              console.log("res====", res);
              if (res.status === 200) {
                this.$message({
                  message: "信息编辑成功",
                  type: "success",
                });
                this.getCoordinate([]); //将拾取到的坐标清空
                this.$router.push("/data/manage");
              }
            }
            // --------------
          } else {
            // 添加部分
            if (this.ruleForm.addType === "工业遗产") {
              var res2 = await this.$axios.post(
                "/postHeritageMainData/postHeritageMainData",
                this.ruleForm
              );
              // console.log("res====", res2);
              if (res2.status === 200) {
                this.$message({
                  message: "人文故居信息添加成功",
                  type: "success",
                });
                this.getCoordinate([]); //将拾取到的坐标清空
                this.$router.push("/data/manage");
              }
            }
          }

          console.log(this.ruleForm);
        } else {
          this.$message.error("请检查完善相关信息");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
/* .HeritageAdd {
  overflow: auto;
} */
</style>